<template>
    <div class="page">
        <el-form 
        ref="form"
        class="form" 
        label-width="80px" 
        :rules="rules" 
        :model="model"> 
            <el-form-item label="Username" prop="username">
                <el-input v-model="model.username" placeholder="请输入Username" />
            </el-form-item>

            <el-form-item label="Password" prop="password">
                <el-input 
                v-model="model.password"
                type="password" 
                placeholder="请输入Password" />
            </el-form-item>

            <el-form-item label="VerifyCode" prop="verifyCode">
              <div class="code-box">
              <el-input
              @keyup.enter="handleLogin"
              v-model="model.verifyCode" 
              placeholder="请输入VerifyCode">
              </el-input>
              <Captcha ref="captchaRef" />
              </div>
          </el-form-item> 


            <el-form-item>
                <el-button type="primary" @click="handleLogin">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import Captcha from "./components/Captcha.vue";
import { ElMessage } from "element-plus";
import { loginApi } from "@/api/login";

    export default {
        components:{
            Captcha,
        },
        data() {
            return {
                loading: false,
                model : {
                    username : 'admin',
                    password : '123456',
                    verifyCode: "",
                },
                rules:{
                    username: [{required:true,message:"请输入用户名"},
                    // {
                    //     min:5,
                    //     message:'最小长度为5位'
                    // },
                    {
                        max:18,
                        message:'最大长度为18'
                    },
                    // {
                    //     type:'email',
                    //     message:'请输入邮箱格式'
                    // }
                ],
                    password: [{required:true,message:"请输入密码"},
                    // {
                    //     pattern: /^1\d{10}$/,
                    //     message:'请满足正则',
                    // }
                ]

                }
            }
        },
        methods:{
            handleLogin(){
                //触发表单校验
                this.$refs.form.validate(async(flag)=>{
                    //表单校验失败
                    if(!flag) return

                    try{
                        //调用登录接口
                        this.loading=true;

                        //派发登录动作
                        await this.$store.dispatch("user/login",{
                            ...this.model,
                            captchaId: this.$refs.captchaRef.captchaId,
                        })

                        //获取用户信息
                        await this.$store.dispatch("user/getInfo")

                        console.log("登录成功");

                        ElMessage({
                            type:"success",
                            message:"登录成功"
                        })

                        this.$router.push("/")

                    } catch(error){
                        console.log("登录失败");

                        //让Captcha组件重新获取数据
                        this.$refs.captchaRef.refresh();
                        this.$refs.form.resetFields();

                    } finally {
                        this.loading = false
                    }
                })
                
            }
        }
    }
</script>

<style lang="scss" scoped>
.page {
    height: 100%;
    background-color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.form{
    width: 360px;
    padding: 16px;
    border-radius: 10px;
    background-color: #fff;
}
.code-box{
  display: flex;
  height: 32px;
}
</style>